# plugin_videobox #

## License ##

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
It was built using the jQuery library. Licensed under both MIT and GPL licenses

http://fancybox.net/

http://jquery.org/license

The MIT License is recommended for most projects. It is simple and easy to understand and it places almost no restrictions on what you can do with a jQuery project.

If the GPL suits your project better you are also free to use a jQuery project under that license.

You don’t have to do anything special to choose one license or the other and you don’t have to notify anyone which license you are using. You are free to use a jQuery project in commercial projects as long as the copyright header is left intact.
Licenses

    * MIT License (More Information)
    * GPL (More Information)


## Reference ##
http://chadly.net/post/2009/01/29/Lightbox-for-YouTube-Videos.aspx

This looks pretty cool as well:

http://catcubed.com/2008/12/23/ceebox-a-thickboxvideobox-mashup/
## layout.html ##

### head section ###

Place the following above other Web2py js and css references

    {{#------  videobox required CSS and JS files (See static/plugin_videobox/ABOUT) ------}}
    {{response.files.append(URL(request.application,'static','plugin_videobox/scripts/fancybox/fancy.css'))}}
    {{response.files.append(URL(request.application,'static','plugin_videobox/scripts/jquery-1.2.6.min.js'))}}
    {{response.files.append(URL(request.application,'static','plugin_videobox/scripts/jquery.pngFix.pack.js'))}}   
    {{response.files.append(URL(request.application,'static','plugin_videobox/scripts/jquery.fancybox-1.0.0.js'))}}
    {{response.files.append(URL(request.application,'static','plugin_videobox/scripts/swfobject.js'))}}

then place the following between {{include 'web2py_ajax.html'}} and </head>:

        {{include 'web2py_ajax.html'}}
        {{#------  videobox required JS (See static/plugin_videobox/ABOUT) ------}}
        <script type="text/javascript">
            $(document).ready(function() {
                $("a[@rel*=fancyvideo]").fancybox({
                    overlayShow: true,
                    frameWidth:640,
                    frameHeight:360
                });
    <p><a href="http://www.youtube.com/watch?v=hPuwcfGy984" rel="fancyvideo">Play video</a></p>
            });
        </script>
    </head>


## index.html ##

{{extend 'layout.html'}}

{{if 'message' in globals():}}{{=H2(message)}}{{else:}}{{=BEAUTIFY(response._vars)}}{{pass}}

<hr />

<h1>{{=T('Fancybox with Video Popup Demo')}}</h1>

<div>
    <p><a href="http://www.youtube.com/watch?v=hPuwcfGy984" rel="fancyvideo">Play video</a></p>
</div>
